<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>空格派 | 让阅读更清爽！</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <style>
    * {
      -webkit-tap-highlight-color: transparent;
      outline: none !important;
      font-family: "Optima-Regular", "PingFang SC", "Helvetica Neue",
        "Helvetica", "Arial", sans-serif;
      /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    }

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #999;
    }

    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #999;
    }

    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #999;
    }

    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      color: #999;
    }

    *::selection {
      color: #ff5f56;
      background: transparent;
      background-color: #282c34;
    }

    *::-moz-selection {
      color: #ff5f56;
      background: transparent;
      background-color: #282c34;
    }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      font-size: 1rem;
      box-sizing: border-box;
      background-image: linear-gradient(to bottom, #dfe9f3 0%, white 100%);
    }

    h2 {
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
      font-size: 2rem;
      text-align: center;
      margin-bottom: 40px;
      -webkit-box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.42),
        0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px -2px rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.42),
        0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px -2px rgba(0, 0, 0, 0.1);
    }

    form::before {
      content: "";
      display: block;
      background: transparent;
      background: url(./preCode-bg-s.svg) no-repeat;
      background-position: 0 0;
      padding: 15px 0px;
      background-size: contain;
      height: 1.5rem;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
    }

    form {
      box-sizing: border-box;
      border-radius: 0 0 6px 6px;
      box-shadow: #84a1a8 0px 10px 15px;
      -webkit-box-shadow: #84a1a8 0px 10px 15px;
      text-align: center;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      border-bottom: 1px solid#4A4A4A;
      color: #eee;
    }

    a:focus,
    a:hover {
      color: #eee;
      border-bottom-color: #eee;
    }

    .textarea {
      margin: 0 auto;
      /* margin-top: 6vh; */
      border: none;
      width: 92%;
      border-radius: 0%;
      outline: none;
      height: 50vh;
      word-break: break-all;
      text-align: justify;
      resize: none;
      font-size: 1rem;
      text-overflow: ellipsis;
      background: transparent;
      box-sizing: border-box;
    }

    p {
      text-align: center;
      font-size: 1rem;
    }

    footer {
      width: 100vw;
      padding: 30px 0 26px;
      position: fixed;
      bottom: 0;
      margin: 0 auto;
      color: #eee;
      font-size: 12px;
      background: #323437;
      box-shadow: 2px 0 10px #eee;
    }

    input {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin: 5vh 0;
      /* padding: 2vh 5vh; */
      padding: 12px 20px;
      cursor: pointer;
      outline: none;
      letter-spacing: 0.2rem;
      /* background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%); */
      font-size: 1rem;
      color: #fefefe;
      background: #5d917d;
    }

    .btn-active {
      color: #98c379;
      background: #282c34;
    }

    /* 当浏览器的可视区域大于980px */
    @media screen and (min-width: 914px) {
      form {
        width: 700px;
        margin: 0 auto;
        padding: 10px;
        border-left: 1px solid rgba(186, 137, 245, 0.75);
        border-right: 1px solid rgba(186, 137, 245, 0.75);
        box-sizing: border-box;
        /* box-shadow: rgb(170, 170, 170) 0px 0px 15px inset; */
      }
    }

    @media screen and (max-device-width: 620px) {
      h2 {
        margin: 0 auto;
        margin-bottom: 20px;
        width: 100vw;
        padding: 10px 2%;
        font-size: 1rem;
      }

      section {
        padding-top: 5vh;
        margin: 0 auto;
        width: 96%;
        padding: 0 2%;
      }

      footer {
        width: 100vw;
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        margin: 0 auto;
        color: #eee;
        background: #323437;
        box-shadow: 2px 0 10px #eee;
      }
    }

    @media screen and (min-width: 620px) {
      h2 {
        margin: 0 auto;
        margin-bottom: 20px;
        width: 100vw;
        padding: 10px 10px;
        font-size: 1rem;
      }

      section {
        padding-top: 5vh;
        margin: 0 auto;
        width: 96%;
        padding: 0 2%;
      }

      footer {
        margin: 0 auto;
        padding: 10px 2%;
        width: 100vw;
      }
    }
  </style>

  <body style="text-align: center">
    <h2>空格派</h2>
    <section>
      <form>
        <textarea
          name="inText"
          placeholder="在这里粘贴需要格式化的文章..."
          class="textarea"
        ></textarea>
        <input
          onclick="addBlank(this.form.inText);changeBtnStyle(this)"
          type="button"
          name="btnConvert"
          class="btn"
          value="格式化"
        />
      </form>
    </section>

    <script type="text/javascript">
      function addBlank(inText) {
        // 空格处理
        // 替换规则：outText = inText.value.replace(需替换的内容, 替换后的内容);
        var outText;
        //（中文）（A大写字母、小写字母、数字）
        outText = inText.value.replace(
          /([\u4E00-\u9FA3])([A-Za-z0-9\(\[\{@#])/g,
          "$1 $2"
        );
        //（大写字母、小写字母、数字） + （中文）
        outText = outText.replace(
          /([A-Za-z0-9\.,!@#%?\)\]\}])([\u4E00-\u9FA3])/g,
          "$1 $2"
        );
        //替换以下标点【符号后】的多个连续空格，替换以下标点【符号前】的多个连续空格
        outText = outText.replace(/([〔〕（）。，！？《》—“”「」]) +/g, "$1");
        outText = outText.replace(/ +([〔〕（）。，！？《》—“”「」])/g, "$1");
        //替换连续多个空格为一个空格
        outText = outText.replace(/ +/g, " ");

        //替换引号
        outText = outText.replace(/“/g, "「");
        outText = outText.replace(/”/g, "」");
        outText = outText.replace(/‘/g, "『");
        outText = outText.replace(/’/g, "』");

        // 替换中文冒号为英文冒号
        outText = outText.replace(/1：/g, "1:");
        outText = outText.replace(/2：/g, "2:");
        outText = outText.replace(/3：/g, "3:");
        outText = outText.replace(/4：/g, "4:");
        outText = outText.replace(/5：/g, "5:");
        outText = outText.replace(/6：/g, "6:");
        outText = outText.replace(/7：/g, "7:");
        outText = outText.replace(/8：/g, "8:");
        outText = outText.replace(/9：/g, "9:");
        outText = outText.replace(/10：/g, "10:");
        outText = outText.replace(/11：/g, "11:");
        outText = outText.replace(/12：/g, "12:");
        outText = outText.replace(/13：/g, "13:");
        outText = outText.replace(/14：/g, "14:");
        outText = outText.replace(/15：/g, "15:");
        outText = outText.replace(/16：/g, "16:");
        outText = outText.replace(/17：/g, "17:");
        outText = outText.replace(/18：/g, "18:");
        outText = outText.replace(/19：/g, "19:");
        outText = outText.replace(/20：/g, "20:");
        outText = outText.replace(/21：/g, "21:");
        outText = outText.replace(/22：/g, "22:");
        outText = outText.replace(/23：/g, "23:");
        outText = outText.replace(/24：/g, "24:");
        // 数字加顿号换算成数字加点
        outText = outText.replace(/1、/g, "1. ");
        outText = outText.replace(/2、/g, "2. ");
        outText = outText.replace(/3、/g, "3. ");
        outText = outText.replace(/4、/g, "4. ");
        outText = outText.replace(/5、/g, "5. ");
        outText = outText.replace(/6、/g, "6. ");
        outText = outText.replace(/7、/g, "7. ");
        outText = outText.replace(/8、/g, "8. ");
        outText = outText.replace(/9、/g, "9. ");
        outText = outText.replace(/10、/g, "10. ");
        outText = outText.replace(/11、/g, "11. ");
        outText = outText.replace(/12、/g, "12. ");
        outText = outText.replace(/13、/g, "13. ");
        outText = outText.replace(/14、/g, "14. ");
        outText = outText.replace(/15、/g, "15. ");
        outText = outText.replace(/16、/g, "16. ");
        outText = outText.replace(/17、/g, "17. ");
        outText = outText.replace(/18、/g, "18. ");
        outText = outText.replace(/19、/g, "19. ");
        outText = outText.replace(/20、/g, "20. ");
        //替换专有名词
        outText = outText.replace(/Appso/g, "AppSo");
        //英文替换
        outText = outText.replace(/ios/g, "iOS");
        outText = outText.replace(/IOS/g, "iOS");
        outText = outText.replace(/iphone/g, "iPhone");
        outText = outText.replace(/Iphone/g, "iPhone");
        outText = outText.replace(/IPHONE/g, "iPhone");
        outText = outText.replace(/ipad/g, "iPad");
        outText = outText.replace(/Ipad/g, "iPad");
        outText = outText.replace(/IPAD/g, "iPad");
        outText = outText.replace(/macbook/g, "MacBook");
        outText = outText.replace(/Macbook/g, "MacBook");
        outText = outText.replace(/MACBOOK/g, "MacBook");
        outText = outText.replace(/meizu/g, "MEIZU");
        outText = outText.replace(/flyme/g, "Flyme");
        outText = outText.replace(/FLYME/g, "Flyme");
        outText = outText.replace(/panplus/g, "Panplus");
        outText = outText.replace(/plus/g, "Plus");
        outText = outText.replace(/PLUS/g, "Plus");
        outText = outText.replace(/ pro/g, " Pro");
        outText = outText.replace(/Whatsapp/g, "WhatsApp");
        outText = outText.replace(/whatsapp/g, "WhatsApp");
        outText = outText.replace(/facebook/g, "Facebook");
        outText = outText.replace(/ig /g, "IG ");
        outText = outText.replace(/iG /g, "IG ");
        outText = outText.replace(/iG /g, "IG ");
        outText = outText.replace(/rng /g, "RNG ");
        outText = outText.replace(/rng /g, "RNG ");
        outText = outText.replace(/SpaceX/g, "SpaceX");
        outText = outText.replace(/spaceX/g, "SpaceX");
        // 部分特殊公司不空格
        outText = outText.replace(/36 \u6c2a/g, "36\u6c2a"); // 36氪
        outText = outText.replace(/i \u9ed1\u9a6c/g, "i\u9ed1\u9a6c"); // i黑马
        outText = outText.replace(/IT \u6854\u5b50/g, "IT\u6854\u5b50"); // IT桔子
        outText = outText.replace(/IT \u4e4b\u5bb6/g, "IT\u4e4b\u5bb6"); // IT之家
        outText = outText.replace(
          /PingWest \u54c1\u73a9/g,
          "PingWest\u54c1\u73a9"
        ); // PingWest品玩
        //关于编程的关键词替换
        outText = outText.replace(/HTML/g, "html");
        outText = outText.replace(/CSS/g, "css");
        outText = outText.replace(/javascript/g, "JavaScript");
        outText = outText.replace(/markdown/g, "Markdown");
        outText = outText.replace(/Index/g, "index");
        //键盘关键词
        outText = outText.replace(/ctrl/g, "Ctrl");
        outText = outText.replace(/alt/g, "Alt");
        outText = outText.replace(/shift/g, "Shift");
        outText = outText.replace(/command/g, "Command");
        //软回车替换
        // outText = outText.replace(/(\n|\r|\r\n|↵)/g, "<br/>");

        //替换多余空行
        //替换中文之间多余的空格
        // outText = outText.replace(/([\u4e00-\u9fa5]+)\s+([\u4e00-\u9fa5]+)/g, "$1$2");

        inText.value = outText;
      }

      var flag = 0;
      //按钮点击后
      function changeBtnStyle(obj) {
        // obj.className = 'btn-active'
        // obj.value = "已复制到剪贴板"
        if (flag == 0) {
          obj.value = "已复制到剪贴板";
          flag = 1;
          obj.className = "btn-active";
        } else {
          obj.value = "格式化";
          flag = 0;
          obj.className = "";
        }
      }

      // 复制文本到剪贴板
      function copyText() {
        const textarea = document.querySelector("textarea");
        textarea.select();
        document.execCommand("copy");
      }
      var copyBtn = document.querySelector(".btn");
      // 点击按钮复制文本
      copyBtn.addEventListener("click", copyText);
    </script>

    <footer>
      <section>
        我的主页：<a href="#" target="_blank"
          >服务器已到期，暂时打不开</a
        >
      </section>
    </footer>
  </body>
</html>
